<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>切换bgc</title>
    <style>
      /* 
      css三种引入方式
      1.行内
      2.页内
      3.页外
      */
      input[type="radio"] {
        appearance: none;
        border: none;
        width: 50px;
        height: 50px;
      }
      /* 
      最好用属性选择器来实现，避免影响到页内的其他input框
      */
      input[type="radio"]:checked {
        border: 2px solid black;
        border-radius: 50%;
      }
      #red {
        background-color: red;
      }
      #red:checked ~ div {
        background-color: red;
      }
      #blue {
        background-color: blue;
      }
      #blue:checked ~ div {
        background-color: blue;
      }
      #green {
        background-color: green;
      }
      #green:checked ~ div {
        background-color: green;
      }
      #yellow {
        background-color: yellow;
      }
      #yellow:checked ~ div {
        background-color: yellow;
      }
      #pink {
        background-color: pink;
      }
      #pink:checked ~ div {
        background-color: pink;
      }
      .bg {
        width: 500px;
        height: 300px;
        font-size: 60px;
        border: solid;
        background-color: #fff;
      }
    </style>
  </head>
  <body>
    <!-- 
    实际遇到新的功能时，第一步往往是分析/开会，用什么方式去实现/怎么实现，比较多种方式的优缺点，选择最合适的方式。
    最后一步才是我们的书写代码
   -->
    <input type="radio" name="color" id="red" checked />
    <!-- 优化用户体验 -->
    <input type="radio" name="color" id="blue" />
    <input type="radio" name="color" id="green" />
    <input type="radio" name="color" id="yellow" />
    <input type="radio" name="color" id="pink" />
    <!-- 如果不写name属性，编辑器无法将input识别为同一组单选框，不能实现单选功能 -->
    <div class="bg">我的背景颜色会变</div>
  </body>
</html>
